import 'package:baselib/utils/image_util.dart';
import 'package:baselib/widgets/gradient_card_view.dart';
import 'package:baselib/widgets/inkwell_button.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:framelib/utils/color_util.dart';
import 'package:framelib/utils/drawable_util.dart';
import 'package:framelib/utils/px_util.dart';
import 'package:framelib/utils/string_util.dart';
import 'package:framelib/widgets/main_gradient_button.dart';
import 'package:framelib/widgets/page_widget.dart';
import 'package:module_business/module_index/model/voice_chat_tag_entity.dart';
import 'package:module_business/module_index/viewmodel/create_voice_room_view_model.dart';
import 'package:get/get.dart';

class CreateVoiceRoomWidget extends GetView<CreateVoiceRoomViewModel> {
  Function onClose;
  Function onStart;

  CreateVoiceRoomWidget({
    Key key,
    this.onClose,
    this.onStart,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var tag = '${DateTime.now().millisecondsSinceEpoch}';
    Get.put(CreateVoiceRoomViewModel(), tag: tag);
    return PageWidget.build(
        tag: tag,
        builder: (CreateVoiceRoomViewModel model) {
          return SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                //顶部栏
                Container(
                  margin: EdgeInsets.only(),
                  child: Row(
                    children: [
                      SizedBox(
                        width: PxUtil.instance.px_58,
                        height: PxUtil.instance.px_58,
                      ),
                      Expanded(
                          child: ImagesUtil.loadImage(
                              DrawableUtil.instance.icon_Create_voice_room,
                              height: PxUtil.instance.px_14,
                              fit: BoxFit.fitHeight)),
                      InkWellButton(
                        onPressed: () => onClose(),
                        child: Container(
                          width: PxUtil.instance.px_58,
                          height: PxUtil.instance.px_58,
                          alignment: Alignment.center,
                          child: ImagesUtil.loadImage(
                            DrawableUtil.instance.icon_circle_color_close,
                            width: PxUtil.instance.px_19,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                //cover选择框
                GradientCardView(
                    margin: EdgeInsets.only(top: PxUtil.instance.px_10),
                    elevation: PxUtil.instance.px_0,
                    borderRadius: BorderRadius.circular(PxUtil.instance.px_8),
                    child: InkWellButton(
                      onPressed: () => model.selectCover(),
                      child: Container(
                        width: PxUtil.instance.px_86,
                        height: PxUtil.instance.px_86,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: ColorUtil.instance.color_2F4072,
                          borderRadius:
                          BorderRadius.circular(PxUtil.instance.px_8),
                        ),
                        child: (model.coverPath ?? '').isEmpty
                            ? ImagesUtil.loadImage(
                            DrawableUtil.instance.icon_portrait_color_add,
                            width: PxUtil.instance.px_29)
                            : ImagesUtil.loadImage(model.coverPath,
                            width: PxUtil.instance.px_86),
                      ),
                    )),
                //Room cover settings
                Container(
                  margin: EdgeInsets.only(
                    top: PxUtil.instance.px_16,
                    bottom: PxUtil.instance.px_21,
                  ),
                  child: Text(
                    StringUtil.instance.Room_cover_settings,
                    style: TextStyle(
                        color: ColorUtil.instance.color_white,
                        fontSize: PxUtil.instance.px_13),
                  ),
                ),
                //Room name
                Container(
                  height: PxUtil.instance.px_44,
                  margin: EdgeInsets.only(
                    left: PxUtil.instance.px_25,
                    right: PxUtil.instance.px_25,
                  ),
                  padding: EdgeInsets.only(
                    left: PxUtil.instance.px_18,
                    right: PxUtil.instance.px_18,
                  ),
                  decoration: BoxDecoration(
                      color: ColorUtil.instance.color_24ffffff,
                      borderRadius: BorderRadius.circular(PxUtil.instance.px_6)),
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          '${StringUtil.instance.Room_name}：',
                          style: TextStyle(
                            color: ColorUtil.instance.color_white,
                            fontSize: PxUtil.instance.px_13,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                      Expanded(
                          child: TextField(
                            onChanged: (value) => model.roomNameChange(value),
                            style: TextStyle(
                                color: ColorUtil.instance.color_white
                            ),
                            decoration: const InputDecoration(
                                focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent))),
                          ))
                    ],
                  ),
                ),
                SizedBox(
                  height: PxUtil.instance.px_10,
                ),
                //Room password
                Container(
                  height: PxUtil.instance.px_44,
                  margin: EdgeInsets.only(
                    left: PxUtil.instance.px_25,
                    right: PxUtil.instance.px_25,
                    bottom: PxUtil.instance.px_10,
                  ),
                  padding: EdgeInsets.only(
                    left: PxUtil.instance.px_18,
                    right: PxUtil.instance.px_18,
                  ),
                  decoration: BoxDecoration(
                      color: ColorUtil.instance.color_24ffffff,
                      borderRadius: BorderRadius.circular(PxUtil.instance.px_6)),
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          '${StringUtil.instance.Room_password}：',
                          style: TextStyle(
                            color: ColorUtil.instance.color_white,
                            fontSize: PxUtil.instance.px_13,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                      Expanded(
                          child: TextField(
                            onChanged: (value) => model.roomPasswordChange(value),
                            style: TextStyle(
                                color: ColorUtil.instance.color_white
                            ),
                            decoration: const InputDecoration(
                                focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent)),
                                enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(
                                        width: 0, color: Colors.transparent))),
                          )),
                      //切换
                      Obx(() => ConstrainedBox(
                        constraints: BoxConstraints(
                            maxWidth: PxUtil.instance.px_40,
                            maxHeight: PxUtil.instance.px_16),
                        child: Transform.scale(
                          scale: 0.8,
                          child: CupertinoSwitch(
                            value: model.isSetPassword.value,
                            onChanged: (isOpen) => model.setPassword(isOpen),
                            activeColor: ColorUtil.instance.color_D5D9E3,
                            trackColor: ColorUtil.instance.color_A6ADC2,
                            thumbColor: ColorUtil.instance.color_964BF7,
                          ),
                        ),
                      ))
                    ],
                  ),
                ),
                //选择标签栏
                ConstrainedBox(
                  constraints: BoxConstraints(
                      maxHeight: PxUtil.instance.px_100,
                      maxWidth: PxUtil.instance.screenWidth),
                  child: GridView.builder(
                      shrinkWrap: true,
                      padding: EdgeInsets.only(
                        left: PxUtil.instance.px_25,
                        right: PxUtil.instance.px_25,
                        top: PxUtil.instance.px_10,
                        bottom: PxUtil.instance.px_10,
                      ),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: PxUtil.instance.px_2.toInt(),
                          mainAxisSpacing: PxUtil.instance.px_12,
                          crossAxisSpacing: PxUtil.instance.px_12,
                          childAspectRatio: (PxUtil.instance.screenWidth -
                              (PxUtil.instance.px_25 * 2) -
                              PxUtil.instance.px_12) /
                              (2 * PxUtil.instance.px_32)),
                      itemCount: model.voiceChatTags?.length ?? 0,
                      itemBuilder: (BuildContext context, int index) {
                        return Obx(() => _buildTagItemUi(model, index));
                      }),
                ),
                //Set up your room profile...
                PageWidget.buidRemarkUi(
                  margin: EdgeInsets.only(
                    top: PxUtil.instance.px_10,
                    left: PxUtil.instance.px_25,
                    right: PxUtil.instance.px_25,
                  ),
                  remarkTitle: '',
                  hitText: StringUtil.instance.Set_up_your_room_profile_d,
                  hintFontSize: PxUtil.instance.px_13,
                  hintFontColor: ColorUtil.instance.color_half_white,
                  fontSize: PxUtil.instance.px_13,
                  fontColor: ColorUtil.instance.color_white,
                  borderRadius: BorderRadius.circular(PxUtil.instance.px_9),
                  borderColor: ColorUtil.instance.color_transparent,
                  inputHeight: PxUtil.instance.px_100,
                  bgColor: ColorUtil.instance.color_24ffffff,
                  inputChanged: (value) => model.remarkChange(value),
                ),
                Container(
                  margin: EdgeInsets.only(
                    top: PxUtil.instance.px_15,
                    bottom: PxUtil.instance.px_15,
                    left: PxUtil.instance.px_18,
                    right: PxUtil.instance.px_18,
                  ),
                  child: MainGradientButton(
                    onPressed: (onStart == null)
                        ? (() {})
                        : () {
                      if (!model.isValid()) return;
                      onStart(
                          model.coverPath,
                          model.roomName,
                          model.roomPassword,
                          model.voiceChatTags[model.selectedTagIndex.value]
                              .id,
                          model.roomRemark,model.isSetPassword.value);
                    },
                    height: PxUtil.instance.px_36,
                    txt: StringUtil.instance.Confirm,
                  ),
                )
              ],
            ),
          );
        });
  }

  Widget _buildTagItemUi(CreateVoiceRoomViewModel model, int index) {
    var voiceChatTagItem = model.voiceChatTags[index];
    return model.selectedTagIndex.value != index
        ? GestureDetector(
            onTap: () => model.tagItemClick(index),
            child: GradientCardView(
                margin: EdgeInsets.only(),
                elevation: PxUtil.instance.px_0,
                height: PxUtil.instance.px_32,
                borderRadius: BorderRadius.circular(PxUtil.instance.px_22),
                borderWidth: PxUtil.instance.px_0d5,
                child: Container(
                  decoration: BoxDecoration(
                      color: ColorUtil.instance.color_2F4072,
                      borderRadius:
                          BorderRadius.circular(PxUtil.instance.px_22)),
                  alignment: Alignment.center,
                  child: Text(
                    voiceChatTagItem?.tagName,
                    style: TextStyle(
                      color: ColorUtil.instance.color_half_white,
                      fontSize: PxUtil.instance.px_11,
                    ),
                  ),
                )),
          )
        : GestureDetector(
            onTap: () => model.tagItemClick(index),
            child: GradientCardView(
                elevation: PxUtil.instance.px_0,
                height: PxUtil.instance.px_32,
                margin: EdgeInsets.only(),
                borderWidth: PxUtil.instance.px_0d5,
                borderRadius: BorderRadius.circular(PxUtil.instance.px_22),
                alignment: Alignment.center,
                gradient: LinearGradient(colors: [
                  ColorUtil.instance.color_AD2CF1,
                  ColorUtil.instance.color_AD2CF1,
                ]),
                child: Text(
                  voiceChatTagItem?.tagName,
                  style: TextStyle(
                    color: ColorUtil.instance.color_white,
                    fontSize: PxUtil.instance.px_11,
                  ),
                )),
          );
  }
}
